---
title: ConnectButton Tùy chỉnh
description: Tạo một ConnectButton tùy chỉnh
---

# ConnectButton Tùy chỉnh

## Tạo một ConnectButton tùy chỉnh

Bạn có thể sử dụng `ConnectButton.Custom` mức độ thấp để tạo nút kết nối tùy chỉnh của riêng bạn. Thành phần này sẽ hiển thị một hàm, bao gồm tất cả mọi thứ bạn cần để tái triển khai các nút tích hợp sẵn.

Một phiên bản tái triển khai tối nghĩa của các nút tích hợp sẽ trông giống như sau:

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        // Note: If your app doesn't use authentication, you
        // can remove all 'authenticationStatus' checks
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus ||
            authenticationStatus === 'authenticated');

        return (
          <div
            {...(!ready && {
              'aria-hidden': true,
              'style': {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none',
              },
            })}
          >
            {(() => {
              if (!connected) {
                return (
                  <button onClick={openConnectModal} type="button">
                    Connect Wallet
                  </button>
                );
              }

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
};
```

Các thuộc tính sau được chuyển vào hàm hiển thị của bạn.

### Thuộc tính tài khoản

<PropsTable
  data={[
    {
      name: 'account',
      required: false,
      type: 'object | undefined',
      description:
        'Đối tượng chứa các chi tiết về tài khoản hiện tại, được mô tả bên dưới',
    },
    {
      name: 'account.address',
      required: false,
      type: 'string',
      description: (
        <>
          Địa chỉ tài khoản đầy đủ, ví dụ như
          "0x7a3d05c70581bD345fe117c06e45f9669205384f"
        </>
      ),
    },
    {
      name: 'account.balanceDecimals',
      required: false,
      type: 'string | undefined	',
      description: 'Số dư tài khoản bằng số thập phân',
    },
    {
      name: 'account.balanceFormatted',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Số dư tài khoản được định dạng như một chuỗi, ví dụ như{' '}
          <code>1.234567890123456789</code>
        </>
      ),
    },
    {
      name: 'account.balanceSymbol',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Ký hiệu tiền tệ cho số dư, ví dụ như <code>ETH</code>
        </>
      ),
    },
    {
      name: 'account.displayBalance',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Số dư được định dạng bằng 3 chữ số có ý nghĩa, cộng
          ký hiệu, ví dụ như <code>1.23 ETH</code>
        </>
      ),
    },
    {
      name: 'account.displayName',
      required: false,
      type: 'string',
      description: (
        <>
          Tên ENS, hoặc phiên bản rút gọn của địa chỉ, ví dụ như{' '}
          <code>"rainbowwallet.eth"</code> hoặc <code>"0x7a…384f"</code>
        </>
      ),
    },
    {
      name: 'account.ensAvatar',
      required: false,
      type: 'string	| undefined',
      description: 'URI của avatar ENS',
    },
    {
      name: 'account.ensName',
      required: false,
      type: 'string	| undefined',
      description: (
        <>
          Tên ENS, ví dụ như <code>rainbowwallet.eth</code>
        </>
      ),
    },
    {
      name: 'account.hasPendingTransactions',
      required: false,
      type: 'boolean',
      description:
        'Boolean chỉ định tài khoản có giao dịch đang chờ xử lý cho chuỗi hiện tại hay không',
    },
  ]}
/>

### Thuộc tính của chuỗi

<PropsTable
  data={[
    {
      name: 'chain',
      required: false,
      type: 'object | undefined',
      description:
        'Đối tượng chứa các chi tiết về chuỗi hiện tại, được mô tả bên dưới',
    },
    {
      name: 'chain.hasIcon',
      required: false,
      type: 'boolean',
      description: 'Chuỗi có biểu tượng được chỉ định hay không',
    },
    {
      name: 'chain.iconUrl',
      required: false,
      type: 'string | undefined',
      description:
        'URL biểu tượng chuỗi (có thể cũng không được xác định trong khi tải dữ liệu URLs Base64)',
    },
    {
      name: 'chain.iconBackground',
      required: false,
      type: 'string | undefined',
      description:
        'Nền biểu tượng chuỗi sẽ hiển thị trong khi hình ảnh đang tải',
    },
    {
      name: 'chain.id',
      required: false,
      type: 'number',
      description: (
        <>
          ID chuỗi, ví dụ như <code>1</code>
        </>
      ),
    },
    {
      name: 'chain.name',
      required: false,
      type: 'string | undefined',
      description: (
        <>
          Tên chuỗi, ví dụ như <code>"Ethereum"</code>
        </>
      ),
    },
    {
      name: 'chain.unsupported',
      required: false,
      type: 'boolean | undefined',
      description:
        'Boolean chỉ định chuỗi hiện tại có được hỗ trợ hay không',
    },
  ]}
/>

### Thuộc tính trạng thái của modal

<PropsTable
  data={[
    {
      name: 'openAccountModal',
      required: false,
      type: '() => void',
      description: 'Hàm mở modal tài khoản',
    },
    {
      name: 'openChainModal',
      required: false,
      type: '() => void',
      description: 'Hàm mở modal chuỗi',
    },
    {
      name: 'openConnectModal',
      required: false,
      type: '() => void',
      description: 'Hàm mở modal kết nối',
    },
    {
      name: 'accountModalOpen',
      required: false,
      type: 'boolean',
      description:
        'Boolean chỉ định modal tài khoản có mở hay không',
    },
    {
      name: 'chainModalOpen',
      required: false,
      type: 'boolean',
      description: 'Boolean chỉ định modal chuỗi có mở hay không',
    },
    {
      name: 'connectModalOpen',
      required: false,
      type: 'boolean',
      description:
        'Boolean chỉ định modal kết nối có mở hay không',
    },
  ]}
/>

### Thuộc tính trạng thái chung

<PropsTable
  data={[
    {
      name: 'mounted',
      required: false,
      type: 'boolean',
      description:
        'Boolean chỉ định thành phần đã được gắn kết hay chưa',
    },
    {
      name: 'authenticationStatus',
      required: false,
      type: '"loading" | "unauthenticated" | "authenticated" | undefined',
      description:
        'Trạng thái xác thực, hoặc không xác định nếu chưa được cấu hình.',
    },
  ]}
/>
